<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    sss
</body>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
<script>
    let { effect, reactive, ref, shallowRef, toRef, toRefs, computed } = VueReactivity;

    let age = ref(18)
    // debugger
    let myAge = computed(() => {
        console.log('effect');
        return age.value + 1 
    })

    // 第一次会执行，并将_dirty设置为fasle，设置缓冲，并且触发计算属性的get，
    // 在get中计算属性依赖的响应式数据会把计算属性内部自定义scheduler的this.effect收集依赖
    console.log(myAge.value);
    // 用缓冲 不会打印effect，也就是不会重新执行计算属性函数
    console.log(myAge.value);
    // 会触发age收集到getter依赖，执行scheduler，将_dirty变为true，取消缓冲
    age.value = 17
    // 当修改计算属性中的依赖时，也会通知计算属性的更新
    console.log(myAge.value);
    debugger
    effect(() => {
        console.log(myAge.value)
    })
    // // 修改age 的时候会触发scheduler, 将缓冲取消，并且通知更新html中用到myAge的地方
    // age.value = 17
    // console.log(myAge.value);
</script>
</html>